<template>
  <el-dialog
    v-model="props.versionDialog"
    title="更新版本"
    width="30%"
    :show-close="false"
    class="version"
  >
    <div class="version-top">
      <div>旧版本文件名：{{ form.fileName }}</div>
    </div>
    <div class="version-top">
      <div>版本号：{{ form.versionNum }}</div>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="文件上传" prop="fileUrl">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          :auto-upload="true"
          :action="`${proxy.$http}/user/upload/uploadFile`"
          :show-file-list="true"
          :http-request="(resp: any) => { return handleUpload(resp) }"
          :before-upload="(resp: any) => { return fileBeforeUpload(resp) }"
          :on-error="(resp: any) => { return fileError(resp) }"
          :on-exceed="handleExceed"
          :on-remove="handleRemove"
          :headers="headers"
          limit="1"
          accept=".docx,.doc,.pptx,.ppt,.pdf,.xls,.xlsx"
        >
          <el-button type="primary">
            <svg
              t="1678678252428"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3568"
              width="20"
              height="20"
            >
              <path
                d="M122.88 512s0 4.096-4.096 4.096v16.384s0 4.096 4.096 4.096l4.096 4.096 4.096 4.096s4.096 0 4.096 4.096h16.384s4.096 0 4.096-4.096l4.096-4.096 380.928-380.928c12.288-12.288 24.576-20.48 36.864-24.576 12.288-4.096 28.672-8.192 45.056-8.192 16.384 0 28.672 4.096 45.056 8.192 16.384 4.096 28.672 12.288 36.864 24.576 12.288 12.288 20.48 24.576 24.576 36.864 4.096 12.288 8.192 28.672 8.192 45.056 0 16.384-4.096 28.672-8.192 45.056-4.096 16.384-12.288 28.672-24.576 36.864L438.272 614.4l-4.096 4.096s0 4.096-4.096 4.096v16.384s0 4.096 4.096 4.096l4.096 4.096 4.096 4.096s4.096 0 4.096 4.096h16.384s4.096 0 4.096-4.096l4.096-4.096L749.568 368.64c16.384-16.384 28.672-36.864 36.864-57.344 8.192-20.48 12.288-45.056 12.288-69.632s8.192-36.864 0-57.344c-8.192-20.48-20.48-40.96-36.864-57.344s-36.864-28.672-57.344-36.864-45.056-12.288-69.632-12.288c-24.576 0-45.056 4.096-69.632 12.288-20.48 8.192-40.96 20.48-57.344 36.864l-380.928 380.928c-4.096 0-4.096 4.096-4.096 4.096z"
                fill="#ffffff"
                p-id="3569"
              ></path>
              <path
                d="M401.408 847.872c-12.288 4.096-28.672 8.192-45.056 8.192-16.384 0-28.672-4.096-45.056-8.192-12.288-8.192-24.576-16.384-36.864-28.672-12.288-12.288-20.48-24.576-24.576-36.864-4.096-12.288-8.192-28.672-8.192-45.056 0-16.384 4.096-28.672 8.192-45.056 4.096-16.384 12.288-28.672 24.576-36.864l311.296-311.296 4.096-4.096s0-4.096 4.096-4.096v-4.096V327.68v-4.096-4.096s0-4.096-4.096-4.096l-4.096-4.096-4.096-4.096s-4.096 0-4.096-4.096H573.44h-4.096-4.096-4.096s-4.096 0-4.096 4.096l-4.096 4.096L229.376 614.4c-16.384 16.384-28.672 36.864-36.864 57.344-8.192 20.48-12.288 45.056-12.288 69.632 0 24.576 4.096 45.056 12.288 69.632 8.192 20.48 20.48 40.96 36.864 57.344 16.384 12.288 36.864 24.576 57.344 32.768 20.48 8.192 45.056 12.288 69.632 12.288s45.056-4.096 69.632-12.288c20.48-8.192 40.96-20.48 57.344-36.864l380.928-380.928 4.096-4.096s0-4.096 4.096-4.096v-4.096-4.096-4.096-4.096s0-4.096-4.096-4.096l-4.096-4.096-4.096-4.096s-4.096 0-4.096-4.096h-4.096-4.096-4.096-4.096s-4.096 0-4.096 4.096l-4.096 4.096-393.216 368.64c-12.288 12.288-24.576 20.48-36.864 28.672z"
                fill="#ffffff"
                p-id="3570"
              ></path>
            </svg>
            上传文件
          </el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="文件名称" prop="fileName">
        <el-input
          v-model="ruleForm.fileName"
          placeholder="请输入文件名称"
          show-word-limit
          maxlength="128"
        />
      </el-form-item>
      <el-form-item label="版本号" prop="versionNum">
        <el-input
          v-model="ruleForm.versionNum"
          placeholder="请输入最新文件版本号"
        />
        <div>提示：版本更新,不会覆盖之前版本</div>
      </el-form-item>
      <div style="text-align: right">
        <el-button @click="quxiao(ruleFormRef)"> 取消 </el-button>
        <el-button
          type="primary"
          @click="queren(ruleFormRef)"
          :loading="loading"
          >确认</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import {
  ElLoading,
  ElMessage,
  UploadProps,
  FormInstance,
  FormRules,
  UploadInstance
} from 'element-plus'
import { ref, reactive, getCurrentInstance, watch } from 'vue'
import { getLastVersionByDirIdApi, renewVersionApi } from '/@/api/knowledge'
import { uploadFileApi } from '/@/api/publicApi'
import { Session } from '/@/utils/storage'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
  versionDialog: Boolean,
  versionForm: Object
})
const emit = defineEmits(['cancelVersion', 'submitVersion'])
const formSize = ref('default')
const loading = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  dirId: '',
  fileName: '',
  fileUrl: '',
  fileSize: '',
  versionNum: ''
})
const form = ref<any>({})
const validateUrl = (rule: any, value: any, callback: any) => {
  if (ruleForm.value.fileUrl == '') {
    callback(new Error('请上传文件'))
  } else {
    callback()
  }
}
const rules = reactive<FormRules>({
  fileName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
  fileUrl: [{ required: true, validator: validateUrl, trigger: 'change' }],
  versionNum: [{ required: true, message: '请输入版本号', trigger: 'blur' }]
})

const quxiao = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('cancelVersion', props.versionForm?.zskId)
}
const queren = (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.value.dirId = props.versionForm?.id
      renewVersionApi(ruleForm.value).then((res) => {
        if (res.code == 0) {
          ElMessage.success('更新成功')
          formEl.resetFields()
          emit('submitVersion', props.versionForm?.zskId)
        }
      })
      loading.value = false
    } else {
      loading.value = false
    }
  })
}

//文件上传
const fileList = ref<any>([])
const userInfo = Session.get('token')
const token = userInfo ? userInfo : ''
const headers = ref({
  'Content-Type': 'multipart/form-data',
  'Api-User-Token': token
})
const handleUpload = (file: any) => {
  const loading = ElLoading.service({
    lock: true,
    text: '上传中',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  uploadFileApi({ type: 11, file: file.file }).then((res) => {
    ruleForm.value.fileName = res.data.fileNames[0]
    ruleForm.value.fileUrl = res.data.fileIds[0]
    ruleForm.value.fileSize = res.data.fileSizes[0]
    ElMessage.success('文件上传成功！')
    loading.close()
  })
}

const fileError = (err: any) => {
  ElMessage.error('项目文件上传失败！')
  // eqForm.value.devicePicture = ''
}
const fileBeforeUpload = (rawFile: any) => {
  if (rawFile.size == 0) {
    ElMessage.warning('上传的文件是空文件，请重新上传！')
    return false
  }
}

const handleExceed: UploadProps['onExceed'] = (
  rawFile: any,
  uploadFiles: any
) => {
  if (fileList.value.length > 0) {
    ElMessage.warning('请先删除已有文件！')
    return
  }
}

const handleRemove = () => {
  ruleForm.value.fileName = ''
}

watch(
  () => props.versionDialog,
  () => {
    if (props.versionDialog == true) {
      fileList.value = []
      getLastVersionByDirIdApi(props.versionForm?.id).then((res) => {
        if (res.code == 0) {
          form.value = res.data
        }
      })
    }
  }
)
</script>
<style scoped lang="scss">
.version-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 5px;
}

.upload-demo {
  width: 100%;
}
</style>
<style>
.version .el-upload-list__item {
  width: 100% !important;
  height: auto !important;
}
</style>
